﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
    ViewData["Title"] = "客户管理";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="layui-card" style="margin:20px;">
    <div class="layui-card-header">
        <div class="layui-row">
            <div class="layui-col-md6">
                <h2>客户管理</h2>
            </div>
            <div class="layui-col-md6" style="text-align: right;">
                <button class="layui-btn layui-btn-danger" id="btnBatchDelete">
                    <i class="layui-icon">&#xe640;</i> 批量删除
                </button>
                <button class="layui-btn" id="btnAdd">
                    <i class="layui-icon">&#xe654;</i> 新增客户
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <!-- 搜索栏 -->
        <form class="layui-form layui-form-pane" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="CustomerName" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">
                        <i class="layui-icon">&#xe615;</i> 搜索
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <!-- 数据表格 -->
        <table id="customerTable" lay-filter="customerTable"></table>
    </div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 状态显示模板 -->
<script type="text/html" id="statusTpl">
    {{#  if(d.isEnable){ }}
        <span class="layui-badge layui-bg-green">启用</span>
    {{#  } else { }}
        <span class="layui-badge layui-bg-red">禁用</span>
    {{#  } }}
</script>

<!-- 新增/编辑表单 -->
<script type="text/html" id="customerForm">
    <form class="layui-form" style="padding: 10px;" lay-filter="customerForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">客户编码</label>
            <div class="layui-input-block">
                <input type="text" name="customerCode" required lay-verify="required" placeholder="请输入客户编码" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">客户名称</label>
            <div class="layui-input-block">
                <input type="text" name="customerName" required lay-verify="required" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">客户类型</label>
            <div class="layui-input-block">
                <select name="customerType" required lay-verify="required">
                    <option value="">请选择客户类型</option>
                    <option value="个人">个人</option>
                    <option value="企业">企业</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">联系电话</label>
            <div class="layui-input-block">
                <input type="text" name="customerPhone" required lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px">是否启用</label>
            <div class="layui-input-block">
                <input type="radio" name="isEnable" value="true" title="启用" checked>
                <input type="radio" name="isEnable" value="false" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitForm">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<script>
layui.use(['table', 'form', 'layer'], function () {
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.$;

    // 初始化表格
    table.render({
        elem: '#customerTable',
        url: '/Customer/ShowCustomer',
        page: true,
        where: {}, // 初始无条件
        request: {
            pageName: 'pageIndex', // 页码的参数名称，默认：page
            limitName: 'pageSize'  // 每页数据量的参数名，默认：limit
        },
        cols: [[
            {type:'checkbox'},
            {field: 'id', title: 'ID', width: 80, sort: true},
            {field: 'customerCode', title: '客户编码', width: 120},
            {field: 'customerName', title: '客户名称', width: 120},
            {field: 'customerType', title: '客户类型', width: 100},
            {field: 'customerPhone', title: '联系电话', width: 120},
            {field: 'isEnable', title: '状态', width: 100, templet: function(d){
            return d.isEnable===true?'启用':'禁用';
            }},
            {title: '操作', toolbar: '#tableBar', width: 150, fixed: 'right'}
        ]]
    });

    // 搜索按钮点击事件
    form.on('submit(searchBtn)', function(data){
        table.reload('customerTable', {
            where: data.field
        });
        return false;
    });

    // 新增按钮点击事件
    $('#btnAdd').on('click', function(){
        // 生成9位随机数字
        var randomCode = Math.floor(100000000 + Math.random() * 900000000).toString();

        layer.open({
            type: 1,
            title: '新增客户',
            area: ['500px', '600px'],
            content: $('#customerForm').html(),
            success: function(layero, index){
                // 设置表单值
                layui.form.val('customerForm', {
                    id: null,
                    customerCode: randomCode,
                    customerName: '',
                    customerType: '',
                    customerPhone: '',
                    isEnable: 'true'
                });

                // 确保客户编码显示在输入框中
                $(layero).find('input[name="customerCode"]').val(randomCode);
                
                // 确保启用状态被选中
                $(layero).find('input[name="isEnable"][value="true"]').prop('checked', true);

                layui.form.render();
            }
        });
    });

    // 批量删除按钮点击事件
    $('#btnBatchDelete').on('click', function(){
        var checkStatus = table.checkStatus('customerTable');
        var data = checkStatus.data;
        
        if(data.length === 0){
            layer.msg('请至少选择一条数据', {icon: 0});
            return;
        }
        
        layer.confirm('确定要删除选中的' + data.length + '条数据吗？', {
            icon: 3,
            title: '提示'
        }, function(index){
            var ids = data.map(function(item){
                return item.id;
            });
            
            $.ajax({
                url: '/Customer/DelManyCustomer',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(ids),
                success: function(res){
                    layer.msg('删除成功', {icon: 1});
                    table.reload('customerTable');
                },
                error: function(){
                    layer.msg('删除失败', {icon: 2});
                }
            });
            
            layer.close(index);
        });
    });

    // 表格工具条事件
    table.on('tool(customerTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
            layer.confirm('确定删除此客户信息？', function(index){
                $.ajax({
                    url: '/Customer/DeleteCustomer',
                    type: 'DELETE',
                    data: { id: data.id },
                    success: function(res){
                        layer.msg('删除成功');
                        obj.del();
                    }
                });
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            layer.open({
                type: 1,
                title: '编辑客户信息',
                area: ['500px', '600px'],
                content: $('#customerForm').html(),
                success: function(){
                    // 将布尔值转换为字符串
                    data.isEnable = data.isEnable.toString();
                    
                    // 填充表单数据
                    form.val('customerForm', data);
                    layui.form.render();
                }
            });
        }
    });

    // 表单提交事件
    form.on('submit(submitForm)', function(data){
        var url = data.field.id ? '/Customer/UpdateCustomer' : '/Customer/AddCustomer';
        var method = data.field.id ? 'PUT' : 'POST';

        // 确保新增时id为0或空字符串
        if (!data.field.id || data.field.id === '') {
            data.field.id = 0;
        }

        // 将字符串的布尔值转换为实际的布尔值
        data.field.isEnable = data.field.isEnable === 'true';

        $.ajax({
            url: url,
            type: method,
            contentType: 'application/json',
            data: JSON.stringify(data.field),
            success: function(res){
                layer.closeAll();
                layer.msg('保存成功');
                table.reload('customerTable');
            }
        });
        return false;
    });
});
</script>

</body>
</html>







